import { Button, Col, Form, Input, message, Modal, Popconfirm, Row, Radio, Space } from 'antd';
import React, { createRef, useRef } from 'react';

const FormItem = Form.Item;
const form = createRef();
const RevokedCertificatesModelForm = React.forwardRef((props, ref) => {
  const {
    visible,
    onCancel,
    handleSubmit,
    options
  } = props;
  // const { getFieldDecorator } = form;
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 6 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 14 },
    },
  };
  return (
    <Modal
      visible={visible}
      title='选择撤销原因'
      onCancel={onCancel}
      footer={[
        <Button key="back" type="primary" size="default" onClick={onCancel}>
          返回
        </Button>,
        <Button key="OK" type="primary" size="default" onClick={handleSubmit}>
          提交
        </Button>,
      ]}
    >
      <Form ref={ref}>
        <Row gutter={8}>
          <Col span={20}>
           <FormItem name='revokeReason'>
                    
            <Radio.Group>
              <Space direction="vertical">
                {options && options.map(i =>(
                  <Radio value={i.value} key={i.value}>{i.label}</Radio>
                ))}
              </Space>
            </Radio.Group>
           </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
})

class RevokedCertificatesModel extends React.Component {
  form = React.createRef<FormInstance>();

  state = {
    visible: false,
    page: '',
    formValues: '',
    buttonLoading: false,
    record: null
  };
  handleCancel = () => {
    this.form.current?.resetFields();
    this.setState({
      visible: false,
      vButtonLoading: false,
    });
  };
  componentWillUnmount = () => {
    this.setState = (state, callback) => {
      return;
    };
  };
  open = (record) => {
    this.setState({record, visible: true});
  }
  close = () => {
    this.setState({record: {}, visible: false});
  }
  handleSubmit = () => {
    this.setState({
      buttonLoading: true,
    });
    
    const { dispatch } = this.props;
    const _this = this;
    const data = this.form.current?.getFieldsValue();
    dispatch({
      type: 'equipmentCertificate/revoke',
      payload: {
        ecuId: this.state.record.ecuId,
        ecuType: this.state.record.ecuType,
        reason: data.revokeReason
      },
      callback: data => {
        if (data.statusCode === '0') {
          message.success('操作成功');
          // _this.form.current?.resetFields();
          _this.props.handleFormReset();
          
          // dispatch({
          //   type: 'equipmentCertificate/fetch'
          // });
          _this.close();
        } else {
        }
        this.setState({
          buttonLoading: false,
        });
      },
    });
  };

  render() {
    return (
      <div>
        <RevokedCertificatesModelForm
          ref={this.form}
          visible={this.state.visible}
          onCancel={this.handleCancel}
          handleSubmit={this.handleSubmit}
          buttonLoading={this.state.buttonLoading}
          options={this.props.options}
        />
      </div>
    );
  }
}
export default RevokedCertificatesModel;
